<template>
  <div class="fr page">
    <div class="sui-pagination clearfix">
      <ul>
        <li
          class="prev disabled"
          v-show="pageNo === 1 ? false : true"
          @click="changePage(pageNo, 'last')"
        >
          <a href="#">«上一页</a>
        </li>
        <li
          :class="{ active: pageNo === 1 }"
          v-show="pageStar === 1 ? false : true"
          @click.prevent="changePage(1, 'no')"
        >
          <a href="#">1</a>
        </li>
        <li class="dotted" v-show="pageStar === 1 ? false : true">
          <span>...</span>
        </li>
        <li
          v-for="(page, index) in NowPageSize"
          :key="index"
          @click.prevent="changePage(page, 'no')"
          :class="{ active: pageNo === page }"
        >
          <a href="#">{{ page }}</a>
        </li>

        <li
          class="dotted"
          v-show="
            pageEnd > props.totalPages - 5 || pageEnd === props.totalPages
              ? false
              : true
          "
        >
          <span>...</span>
        </li>
        <li
          v-show="
            pageEnd > props.totalPages - 5 || pageEnd === props.totalPages
              ? false
              : true
          "
          @click="changePage(props.totalPages, 'no')"
          :class="{ active: pageNo === props.totalPages }"
        >
          <a href="#">{{ props.totalPages }}</a>
        </li>

        <li
          class="next"
          v-show="pageEnd !== props.totalPages ? true : false"
          @click="changePage(pageNo, 'next')"
        >
          <a href="#">下一页»</a>
        </li>
      </ul>
      <div class="tatalpages">
        <span>共{{ props.totalPages }}页&nbsp;</span>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { computed, onMounted, ref, watch } from "vue";
import { PageData } from "./pageType";
const props = defineProps(["pageSize", "total", "totalPages", "pageNo"]);
const emit = defineEmits(["changePageData"]);
const pageData = ref<PageData>();

const pageSize = computed(() => props.pageSize);
const total = computed(() => props.total);
const totalPages = computed(() => props.totalPages);
const pageNo = computed(() => props.pageNo);

const pageLength = 5;

//开始页码
let pageStar = ref(1);
//结束页码
let pageEnd = ref(pageLength);

//改变star  pageend的函数
const changeStarAndEnd = () => {
  if (pageNo.value <= pageLength - 2) {
    pageStar.value = 1;
    pageEnd.value = pageLength;
  } else if (pageNo.value > totalPages.value - 2) {
    pageStar.value = totalPages.value - pageLength;
    pageEnd.value = totalPages.value;
  } else {
    pageStar.value = pageNo.value - 2;
    pageEnd.value = pageNo.value + 2;
  }
};

const NowPageSize = computed(() => {
  let arr = [];
  for (
    let index = pageStar.value as number;
    (index as number) <= pageEnd.value;
    index++
  ) {
    arr.push(index);
  }
  return arr;
});

//改变页码
const changePage = (page: number, methods: string) => {
  if (methods && methods === "last") {
    page = page - 1;
  }
  if (methods && methods === "next") {
    page = page + 1;
  }
  emit("changePageData", page);
};

watch(pageNo, (newValue) => {
  changeStarAndEnd();
});

onMounted(() => {});
</script>

<style lang="less" scoped>
.page {
  width: 1200px;
  height: 66px;
  overflow: hidden;
  float: right;
  text-align: center;

  .sui-pagination {
    margin: 18px 0;
    width: 100%;
    position: relative;
    .tatalpages {
      float: right;
      margin-top: -30px;
      margin-right: 60px;
    }
    ul {
      margin-left: 0;
      margin-bottom: 0;
      vertical-align: middle;
      width: 100%;
      float: left;

      li {
        line-height: 18px;
        display: inline-block;

        a {
          position: relative;
          float: left;
          line-height: 18px;
          text-decoration: none;
          background-color: #fff;
          border: 1px solid #e0e9ee;
          margin-left: -1px;
          font-size: 14px;
          padding: 9px 18px;
          color: #333;
        }

        &.active {
          a {
            background-color: #fff;
            color: #e1251b;
            border-color: #fff;
            cursor: default;
          }
        }

        &.prev {
          a {
            background-color: #fafafa;
          }
        }

        &.disabled {
          a {
            color: #999;
            cursor: default;
          }
        }

        &.dotted {
          span {
            margin-left: -1px;
            position: relative;
            float: left;
            line-height: 18px;
            text-decoration: none;
            background-color: #fff;
            font-size: 14px;
            border: 0;
            padding: 9px 18px;
            color: #333;
          }
        }

        &.next {
          a {
            background-color: #fafafa;
          }
        }
      }
    }

    div {
      color: #333;
      font-size: 14px;
      // float: right;
      width: 241px;
    }
  }
}

.active {
  color: red;
}
</style>
